<!-- 圈子-推荐-->
<template>
	<view class="item flex flex-column">
		<view class="outer flex ">
			<view class="left flex-shrink" @click="linkpersonal">
				<image :src="item.avatar" mode=""></image>
			</view>
			<view class="right">
				<view class="top flex justify-between align-center">
					<view class="user" @click="linkpersonal">
						<view class="name flex align-center">
							<view class="text">
								{{item.nickname}}
							</view>
						</view>
						<view class="position" v-if="item.position">
							{{item.position}}
						</view>
					</view>
					<view v-if=" !show && status == 0" class="note flex justify-center align-center">
						<view class="icon flex justify-center align-center">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/guanzhu.png" mode="">
							</image>
						</view>
						<view class="texts" @click="changeFocus(item)">
							关注
						</view>
					</view>
				
					<view v-if="show&&status == 0" class="notes flex justify-center align-center" @click="changeFocus(item)">
						<view class="textss">
							已关注
						</view>
					 </view>
				</view>
				<view class="texte" @click="linkDetail">
					<text class="textet">{{item.opinion}}</text>
					<text class="topic"v-if="item.topic">#{{item.topic}}</text>
				</view>
			
				<view class="btmimg">
					<view v-if="!item.type" class=" list flex flex-wrap ">
						<view class="icon" v-for="(item, index) in item.images" :key="index">
							<image :src="item" mode="" @click="preview(index)"></image>
						</view>
					</view>
					<view class="video" v-if="item.type">
						<video :src="item.image"
							controls></video>
					</view>
				</view>
				<view class="positioning flex justify-between align-center">
					<view class="date">
						{{getTimer(item.createDate)}}
					</view>
					<view class="city flex justify-center align-center" v-if="item.place != ''">
						<view class="icon flex justify-center align-center">
							<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/city.png" mode="">
							</image>
						</view>
						<view class="texta">
							{{item.place}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="operation flex justify-between align-center">
			<view class="open flex">
				
				<button open-type="share" @click.stop="sharee(item.attentionListId)" class="texts" @click="share">
					<view class="le">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/fenxiang.png" mode=""></image>
					</view>
				</button>
				<view class="ri">
					{{item.shareNum}}
				</view>
			</view>
			<view class="open flex" @click="linkDetail">
				<view class="le">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/pinlun.png" mode=""></image>
				</view>
				<view class="ri">
					{{item.commentNum}}
				</view>
			</view>
			<view class="open flex" >
				<view class="le" v-if="!item.likeType" @click="dianzan(item.attentionListId)">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan.png" mode=""></image>
				</view>
				<view class="le" v-if="item.likeType" @click="dianzan(item.attentionListId)">
					<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/circle/zan-active.png" mode=""></image>
				</view>
				<view class="ri" >
					{{item.likeNum}}
				</view>
			</view>
		</view>
		<view style="height: 20rpx; width: 750rpx;background: #f5f5f5;">

		</view>
	</view>
</template>

<script>
	export default {
		name: "recommended",
		props: {
			item: Object,
			status: Number,
			isfocus: {
				type: Number,
				default: 0,
			}
		},
		data() {
			return {
				qurey:{
					userId:Number,
				},
				shaw: this.item.likeType,
				num: this.item.likeNum,
				show: this.item.attentionType
			};
		},
		methods:{
			//图片预览
			preview(i){
				uni.previewImage({
					current: this.item.images[i],
					urls: this.item.images
				})
			},
			sharee(id){
				this.$emit('attentionShare',id)
				uni.setStorageSync('shareId',id)
			},
			//跳转去个人中心页面
			linkpersonal(){
				uni.setStorageSync('pageNum',this.item.userId)
				if(this.status == 0){
					uni.navigateTo({
						url: '/pagesB/personalCenter/personalCenter'
					})
				}else{
					return
				}
			},
			//跳转去详情页
			linkDetail(){
				if(this.status == 0){
					uni.setStorageSync('pageNum', this.item.attentionListId)
					uni.navigateTo({
						url: '/pagesB/dynamicDetail/dynamicDetail'
					})
				}else if(this.status == 1){
					return
				}
			},
			//点赞并刷新
			async dianzan(id) {
				if(this.$login()){
					let{
						data,code
					} = await this.$post('/attentionList/attentionLike' , {articleListId: id})
					if(code == 200){
						this.$emit('zan')
						uni.setStorageSync('likeId0',id)
					}
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
			},
			
			//关注
			async changeFocus(it) {
				if(this.$login()){
					this.qurey.userId = it.userId
					let {
						data :attention,
						code
					} = await this.$post('/user/addAttention',this.qurey)
					if(code == 200){
						this.show = !this.show
					}
				}else{
					uni.navigateTo({
						url:'../../pages/login/login'
					})
				}
				
			},
			getTimer(timer) {
			  
			  let nowe = new Date();  // 当前的系统时间
			  let oldtime = new Date(timer);   //目标时间
			  let t_day = oldtime.getDate();
			  let t_year = oldtime.getFullYear();
			  let t_month = oldtime.getMonth() + 1;
			  let t_hour = oldtime.getHours();
			  let t_minute = oldtime.getMinutes();
			  if (t_hour<10){
			    t_hour = '0' + t_hour
			  }
			  if (t_minute < 10) {
			    t_minute = '0' + t_minute
			  }
			  let n_year = nowe.getFullYear();
			  let n_month = nowe.getMonth() + 1;
			  let n_day = nowe.getDate();
			  let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
			  if (t_year == n_year) {
			    if (n_month == t_month) {
			      //  在同一月  
			      if (n_day - t_day == 1) {
			        // 差等于1 昨天 + 时分
					console.log('昨天' + ' ' + t_hour + ':' + t_minute)
			        return '昨天' + ' ' + t_hour + ':' + t_minute
			      } else if (n_day - t_day == 0) {
			        // 显示 时分
					console.log( t_hour + ':' + t_minute)
			        return t_hour + ':' + t_minute
			      } else {
					console.log(t_month + '月' + t_day + '日' +t_hour + ':' + t_minute)
			        return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			      }
			    }else {
					console.log(t_month + '.' + t_day)
					return t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
				}
			  } else {
			    //跨年了  显示 年 月 日 
				console.log(t_year + '.' + t_month + '.' + t_day + ' ' +t_hour + ':' + t_minute)
			    return t_year + '年' + t_month + '月' + t_day + '日' +t_hour + ':' + t_minute
			  }
			},
		}
	}
</script>

<style lang="scss">
	.item {
		.outer {
			padding: 30rpx;
			position: relative;
			.left {
				width: 80rpx;
				height: 80rpx;
				border-radius: 8rpx;
				overflow: hidden;
				margin-right: 20rpx;
			}

			.right {
				
				.top {
					
					.user {
						.name {
							.text {
								font-weight: 500;
								color: #003D5F;
								font-size: 32rpx;
								margin-right: 10rpx;
							}

							.vip {
								width: 47rpx;
								height: 51rpx;
							}
						}

						.position {
							font-weight: 500;
							color: #999999;
							font-size: 24rpx;
						}
					}

					.note {
						position: absolute;
						right: 40rpx;
						width: 135rpx;
						height: 42rpx;
						border: 1rpx solid #6FACFF;
						border-radius: 21rpx;

						.icon {
							width: 20rpx;
							height: 21rpx;
							margin-right: 10rpx;
						}

						.texts {
							font-weight: 400;
							color: #0265EB;
							font-size: 28rpx;
							line-height: 1;
							right: 40rpx;
						}
					}
					
					.notes {
						position: absolute;
						right: 40rpx;
						width: 135rpx;
						height: 42rpx;
						border-radius: 21rpx;
						background: #0265EB;
						.textss{
							font-weight: 400;
							color: #FFFFFF;
							font-size: 28rpx;
							line-height: 1;
						}
					}
				}

				.texte {
					font-weight: 500;
					font-size: 28rpx;
					margin-top: 30rpx;
					width: 590rpx;
					.textet {
						color: #333333;
						width: 590rpx;
						word-wrap: break-word;
					}

					.topic {
						color: #0265EB;
						width: 590rpx;
						word-wrap: break-word;
					}
				}

				.btmimg {
					margin-top: 30rpx;
					.list:after {
					content: "";
					flex: auto;
					}
					.icon {
						width: 168rpx;
						height: 168rpx;
						margin: 20rpx 20rpx 0 0;
					}

					.video {
						width: 560rpx;
						height: 268rpx;
						border-radius: 8rpx;
						overflow: hidden;
						margin-top: 30rpx;

						video {
							width: 100%;
							height: 100%;
						}
					}
				}

				.positioning {
					font-weight: 500;
					color: #999999;
					font-size: 24rpx;
					margin-top: 20rpx;
					padding-right: 30rpx;

					.date {}

					.city {
						position: absolute;
						right: 40rpx;
						.icon {
							width: 19rpx;
							height: 25rpx;
							margin-right: 10rpx;
						}

						.texta {
							font-weight: 500;
							color: #999999;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.operation {
			border-top: 1rpx solid #f5f5f5;
			padding: 30rpx 100rpx;

			.open {
				button::after{
					border: 0;
					display: inline;
					font-size: 20rpx !important;
					padding: 0;
					margin: 0;
					height: 20rpx !important;
				}
					.texts{
						font-size: 20rpx;
						color: #191919;
						background-color: #FFFFFF;
						padding: 0;
						border: none;
					}
				.le {
					width: 36rpx;
					height: 36rpx;
					margin-right: 20rpx;
				}

				.ri {
					font-weight: 500;
					color: #333333;
					font-size: 28rpx;
				}
			}
		}
	}
</style>
